<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>evaluate</title>
<script
	src="${pageContext.request.contextPath}/js/jquery/jquery-2.2.4.min.js"></script>
<link rel="stylesheet"
	href="http://v3.bootcss.com/dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/animate.min.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/main.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/responsive.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/css/owl-coursel/owl.carousel.css">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/font-awesome.min.css" media="screen">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/jquery-ui.css">
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/owl-coursel/owl.transitions.css">
<!-- Magnific-popup -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/magnific-popup/magnific-popup.css">
<!-- Style -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/style.css" media="screen">
<!-- Fw -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/fw.css" media="screen">


<style>
/* 向左的箭头 */
.glyphicon {
	cursor: pointer;
}

.dot-left {
	font-size: 0;
	line-height: 0;
	border-width: 5px;
	border-color: #f37a0e;
	border-left-width: 0;
	border-style: dashed;
	border-right-style: solid;
	border-top-color: transparent;
	border-bottom-color: transparent;
	display: inline-block;
}
/* 文字提示框 */
.tip {
	background: #f37a0e;
	padding: 0 5px;
	display: inline-block;
	border-radius: 5px;
}
</style>
</head>
<body>
	<header>
	<div class="container">
		<div class="row top-header">
			<div class="col-sm-3 text-left">
				<a href="#" class="logo">
					<img src="images/logo.png" alt="logo">
				</a>
			</div>				
			<div class="col-sm-9">
				<ul class="top-link pull-right">
					<li class="hidden-xs"><a href="">Wishlist</a></li>
					<li class="hidden-xs"><a href="#">Compare</a></li>
					<li class="hidden-xs"><a href="product_checkout.html">Checkout</a></li>
					<li class="dropdown hidden-xs">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="dropdownMenu1" aria-haspopup="true" aria-expanded="false">My Account <span class="caret"></span></a>
						<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
							<li><a href="login.jsp">Login</a></li>
							<li><a href="register.jsp">Register</a></li>
							<li><a href="#">Log out</a></li>
						</ul>
					</li>
					<li class="pull-right">
						<div class="cart dropdown">
							<a href="#" class="cart-item dropdown-toggle" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								<span>2</span><i class="fa fa-cart-plus"></i>
							</a>
							<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
								<li>
									<div class="media">
										<div class="media-left">
											<a href="#">
												<img class="media-object" src="images/9.jpg" width="50" alt="...">
											</a>
										</div>
										<div class="media-body">
											<h4 class="product-name">Strawberry</h4>
											<p>$15.0<span> x 3</span> <i class="fa fa-remove"></i></p>
										</div>
									</div>
								</li>
								<li>
									<div class="media">
										<div class="media-left">
											<a href="#">
												<img class="media-object" src="images/8.jpg" width="50" alt="...">
											</a>
										</div>
										<div class="media-body">
											<h4 class="product-name">Red bell pepper</h4>
											<p>$15.0<span> x 3</span> <i class="fa fa-remove"></i></p>
										</div>
									</div>
								</li>
								<li class="table-div">
									<ul class="table-content">
										<li class="row m-0">
											<div class="col col-xs-6">
												<strong>Total:</strong>
											</div>
											<div class="col col-xs-6 color-3 f-bold">
												$90.00
											</div>
										</li>
									</ul>
								</li>
								<li>
									<p>
										<a href="#" class="btn ht-btn bg-3">Checkout</a>
										<a href="#" class="btn ht-btn bg-6">Cart</a>
									</p>
								</li>
							</ul>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="bg-mn color-inher">
			<div class="row m-0">
				<div class="col-sm-1 col-md-1 col-lg-2 p-0">
					<div class="dropdown category-bar">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">
							<i class="fa fa-bars"></i><span>Categories</span>
						</a>
						
					</div>
				</div>
				<div class="col-sm-8 col-md-8 col-lg-7 p-0">
					<div class="main-menu">
						<nav class="navbar navbar-default menu">
							<div class="navbar-header">
								<button type="button" class="navbar-toggle collapsed m-r-xs-15" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
									<span class="sr-only">Toggle navigation</span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
								</button>
							</div>
							<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
								<ul class="nav navbar-nav"> 
									<li><a href="index.jsp">Home</a></li>
									<li><a href="about.jsp">About</a></li>
									<li><a href="login.jsp">Login</a></li>
									<li><a href="register.jsp">Register</a></li>
									<li><a href="#">Contact us</a></li>
								</ul>
							</div>
						</nav>
					</div>
				</div>	
				<div class="col-sm-3 col-md-3 col-lg-3 p-0">
					<div class="search-box m-l-xs-15 m-r-xs-15">
						<input type="text" class="form-item" placeholder="Search...">
						<button type="submit" class="fa fa-search"></button>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	
</header>
	<!-- CONTACT US  start
    ============================= -->
	<section id="contact-us">

		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div id="block" class="block">
						<h1 class="heading wow fadeInUp" data-wow-duration="500ms"
							data-wow-delay="300ms">
							please <span>Evaluate us</span>
						</h1>
					
                      
                            <input id="merchantId" type="hidden" value="${merchantId }">
						<div class="form-group wow fadeInDown" data-wow-duration="500ms"
							data-wow-delay="800ms">
							<div class="container">
								<table
									class="table table-bordered table-hover table-striped table-condensed">
									<tr>
										<th width="33%">评价项目</th>
										<th width="33%">星星</th>
										<th width="33%">分数</th>
									</tr>
					
									<tr class="tr">
										<td>服务评星</td>
										<td><span class="glyphicon glyphicon-star-empty"
											aria-hidden="true"></span> <span
											class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>
											<span class="glyphicon glyphicon-star-empty"
											aria-hidden="true"></span> <span
											class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>
											<span class="glyphicon glyphicon-star-empty"
											aria-hidden="true"></span></td>
										<td class="score"></td>
									</tr>
			
									<tr>
										<td colspan="4">
												<textarea id="commentary"  rows="5" placeholder="please input..."
													 style="resize:none;width:100%;">
												</textarea>

											</td>
									</tr>
								</table>
							</div>
						</div>
						
						<div class="form-group wow fadeInDown" data-wow-duration="500ms"
							data-wow-delay="1000ms">
							<div style="margin-left:2%">
								<button type="button" class="btn btn-success btn-lg">Submit</button>
							</div>
							
						</div>
					


					</div>
				</div>
			
			</div>
		
		</div>
		
	</section>
	

	<script>
		$(function() {
			/**  
			 * 整体思路:该评价案例主要分为两种情况，1、当某行的星星还没有被选中时，此时鼠标移到哪颗星星时，就显示该星星对应的文字提示，前面的星星包括自己都变成实心星，如果该行后面还有星星，那后面的依然是空心星，鼠标离开时文字提示消失，该行星星全部变回原来的空心星；2、当某行有星星被选中，即鼠标点中某颗星，该星星以及前面的星星都变成实心星，如果该行后面还有星星，则依然还是空心星，分数和文字内容显示在该行的后面一列。鼠标移到某颗星星时，还是显示该星星对应的文字提示，前面的星星包括自己依然变成实心星，如果该行后面还有星星，那后面的依然是空心星，鼠标离开时，继续显示原来选中时星星状态。如果重新选中星星，则此时是新的评分分数，新的星星状态了。   
			为所有的span标签绑定mouseout和mouseover事件。bind({事件名：function(){},事件名：function(){}})的方法绑定多个事件  
			 */
			var tip_text = '', $parent = {};
			var ajaxMan = new ajaxManager();
			var reder = new Renderer();
			$(".glyphicon")
					.bind(
							{
								mouseout : function() {
									$parent.children('.extra').remove();
									var score = $parent.siblings('.score')
											.html();
									if (score) {//有星星选中时  
										$parent.children(
												":lt(" + parseInt(score) + ")")
												.removeClass(
														'glyphicon-star-empty')
												.addClass('glyphicon-star');//PS:此处应该加上parseInt进行整型转换，否则会没有效果  
										$parent
												.children(
														":gt("
																+ eval(parseInt(score) - 1)
																+ ")")
												.removeClass('glyphicon-star')
												.addClass(
														'glyphicon-star-empty');//PS:此处要记得加eval，进行js计算，不然会报“jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: NaN)”的错误  
									} else {
										$(this).prevAll().andSelf()
												.removeClass('glyphicon-star')
												.addClass(
														'glyphicon-star-empty');
									}
								},
								mouseover : function() {
									$parent = $(this).parent();//把父节点存放起来  
									var score = $parent.siblings('.score')
											.html();
									$parent
											.append('<span class="extra dot-left"></span><span class="extra tip"></span>');//添加提示框  
									tip_text = indexText($(this).index());//得到相应的文字提示  
									$(this).siblings('.tip').html(tip_text);//显示文字提示  
									$(this).prevAll().andSelf().removeClass(
											'glyphicon-star-empty').addClass(
											'glyphicon-star');
									if (score) {//当有星星选中时，为了解决鼠标移到选中星星的的前面星星时的小bug，此时会出现前面星星鼠标滑动时，星星颜色不变化现象  
										$(this).nextAll().not('.extra')
												.removeClass('glyphicon-star')
												.addClass(
														'glyphicon-star-empty');
									}
								},
								click : function() {
									var score = $(this).index() + 1;
									$parent.siblings('.score').html(
											score + '(' + tip_text + ')');
									$(this).prevAll().andSelf().removeClass(
											'glyphicon-star-empty').addClass(
											'glyphicon-star');
								}
							});

			$('.btn-success').click(
					function() {
						//var allScore = '';
						/* $('.score').each(
								function() {
									var text = $(this).html();
									if (text == '') {
										alert('请完成每项的评分后再提交!');
										throw "请完成每项的评分后再提交!";//向浏览器抛出异常，终止程序运行，用了return false试了下，还是会继续执行下面的弹窗，这里用throw刚好恰到好处,如果想继续用return false则可以改成if...else...进行判断处理也可以。  
										//return false;  
									}
									allScore += $(this).siblings(":first")
											.html()
											+ ':' + text + '\n';
								}); */
								
						var text = $('.score').text();
						if(text == ''){
							alert('请完成评分再提交！');
							throw "请完成评分再提交！";
						}
						
						var reg=/[\u4E00-\u9FA5]/g;
					    var grade = text.replace(reg,'').replace("/","").replace("(","").replace(")","").trim();
					    var merchantId = $("#merchantId").val();
					    var commentary = $("#commentary").val().trim();
						if(commentary==''){
							alert("你没有填写评价哦");
							throw "你没有填写评价哦";
						}
						var e = new Evaluate();
						e.grade = grade;
						/* e.merchantId = merchantId; */
						e.merchantId = "8a5e9d1c5de6483f015de648bb250000";
						e.commentary = commentary;
						//alert(grade + "..." + merchantId +"..." + commentary);
						alert(JSON.stringify(e));
						ajaxMan.add(JSON.stringify(e),reder.rendererTable);
					});
		});
		
		//评论内容对象
		function Evaluate(){
			var grade;
			var merchantId;
			var commentary;
		}

		//封装文字提示函数  
		function indexText(i) {
			switch (i) {
			case 0:
				return '非常不满意';
			case 1:
				return '不满意';
			case 2:
				return '一般';
			case 3:
				return '满意';
			case 4:
				return '非常满意';
			}
		}
		
		//AjAX传输数据到后台
		function ajaxManager(){
			var obj={};
			obj.add = function(json,onSuccess){
				$.ajax({
					type:"POST",
					url:"commentary",
					data:json,
					contentType:"application/json",
					dataType: "json"
				}).done(function(msg){
					onSuccess();
				});
			};
			
			return obj;
		}
		
		//渲染器
		function Renderer(){
			var obj = {};
			obj.rendererTable = function(){
				var div = $("#block");
				div.empty();
				var html="<h1 class='heading wow fadeInUp' data-wow-duration='500ms' data-wow-delay='300ms'><span>Thanks your suggestion</span></h1>";
				div.append($.parseHTML(html));
			};
			return obj;
		}
		
		
	</script>
</body>
</html>
